<!DOCTYPE html>
<html>
<head>
    <title>商品管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-table.min.css" rel="stylesheet">
    <style>
        /* 侧边栏样式 */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #f8f9fa;
            padding-top: 20px;
            z-index: 1000;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
        }

        .sidebar .menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar .menu li {
            padding: 10px 20px;
        }

        .sidebar .menu li a {
            color: #333;
            text-decoration: none;
            display: block;
        }

        .sidebar .menu li a:hover {
            background-color: #e9ecef;
            color: #007bff;
        }

        .sidebar .menu li.active {
            background-color: #007bff;
        }

        .sidebar .menu li.active a {
            color: white;
        }

        /* 内容区域样式 */
        .content-wrapper {
            margin-left: 200px;
            padding: 20px;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .sidebar {
                width: 60px;
            }

            .sidebar .menu li {
                text-align: center;
            }

            .sidebar .menu li a {
                padding: 10px;
            }

            .content-wrapper {
                margin-left: 60px;
            }
        }

        /* 用户信息显示样式 */
        .user-info {
            padding: 10px 20px;
            border-bottom: 1px solid #dee2e6;
            margin-bottom: 20px;
            background-color: #e9ecef;
        }

        .user-info .username {
            font-weight: bold;
            color: #495057;
        }

        .user-info .role {
            font-size: 12px;
            color: #6c757d;
        }
    </style>
</head>
<body>
<!-- 左侧菜单栏 -->
<div class="sidebar">
    <!-- 用户信息显示 -->
    <div class="user-info">
        <div class="username" id="currentUsername">加载中...</div>
        <div class="role" id="currentRole">加载中...</div>
        <button id="btn_logout" type="button" class="btn btn-sm btn-outline-secondary" style="margin-top: 5px;">
            <span class="glyphicon glyphicon-log-out"></span> 退出登录
        </button>
    </div>
    
    <ul class="menu">
        <li class="active"><a href="#" data-target="product" id="menu-product">商品浏览</a></li>
        <li><a href="./order.html" data-target="order">订单管理</a></li>
        <li class="admin-only" style="display: none;"><a href="./index.html" data-target="index">用户管理</a></li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="content-wrapper">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title text-center" id="pageTitle">商品浏览</h3>
        </div>
        <div class="panel-body">
            <div id="toolbar" class="btn-group">
                <button id="btn_save" type="button" class="btn btn-primary admin-only" style="display: none;">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <button id="btn_edit" type="button" class="btn btn-primary admin-only" style="display: none;">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
                </button>
                <button id="btn_delete" type="button" class="btn btn-primary admin-only" style="display: none;">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
                <button id="btn_buy" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>加入购物车
                </button>
                <button id="btn_shopcart" type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>查看购物车
                </button>
            </div>

            <!-- 在表格列定义中添加图片渲染 -->
            <table data-toggle="table" id="table" data-height="400"
                   data-classes="table table-hover" data-striped="true"
                   data-pagination="false" data-side-pagination="server"
                   data-show-refresh="true" data-show-toggle="true"
                   data-show-columns="true" data-toolbar="#toolbar">
                <thead>
                <tr>
                    <th data-field="state" data-checkbox='true'></th>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
                </thead>
            </table>
    </div>
</div>

    <!-- 添加商品模态框（Modal） -->
    <div class="modal fade" id="saveModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">添加商品信息</h4>
                </div>
                <div class="modal-body">
                    <form id="productForm" enctype="multipart/form-data">
                        <input type="hidden" id="id" name="id"/>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>商品名称</label>
                                    <input type="text" class="form-control" id="productName" name="productName" required>
                                </div>
                                <div class="form-group">
                                    <label>价格</label>
                                    <input type="number" step="0.01" class="form-control" id="price" name="price" required>
                                </div>
                                <div class="form-group">
                                    <label>库存数量</label>
                                    <input type="number" class="form-control" id="count" name="count" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>商品图片</label>
                                    <input type="file" class="form-control" id="productImage" name="productImage" accept="image/*">
                                    <small class="form-text text-muted">支持jpg、png、gif格式，最大5MB</small>
                                </div>
                                <div class="form-group">
                                    <label>图片预览</label>
                                    <div id="imagePreview" style="border: 1px solid #ddd; padding: 10px; text-align: center; min-height: 150px;">
                                        <img id="previewImg" src="" style="max-width: 100%; max-height: 200px; display: none;">
                                        <div id="noImageText">暂无图片</div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>图片URL（可选）</label>
                                    <input type="url" class="form-control" id="picPath" name="picPath" placeholder="http://example.com/image.jpg">
                                    <small class="form-text text-muted">如果填写URL，将优先使用URL图片</small>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="saveConfirmBtn">确定</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script>

<script>
    // 全局变量
    let currentUser = null;
    let isAdmin = false;

    // 页面加载时检查用户权限
    $(document).ready(function() {
        checkUserPermission();
        initializePage();
    });

    // 检查用户权限
    function checkUserPermission() {
        // 从localStorage获取用户信息
        const userStr = localStorage.getItem('currentUser');
        if (userStr) {
            currentUser = JSON.parse(userStr);
            isAdmin = currentUser.username === 'admin';
            
            // 更新用户信息显示
            $('#currentUsername').text(currentUser.username);
            $('#currentRole').text(isAdmin ? '管理员' : '普通用户');
            
            // 根据权限显示/隐藏元素
            if (isAdmin) {
                $('.admin-only').show();
                $('#menu-product').text('商品管理');
                $('#pageTitle').text('商品管理');
            } else {
                $('.admin-only').hide();
                $('#menu-product').text('商品浏览');
                $('#pageTitle').text('商品浏览');
            }
        } else {
            // 如果没有用户信息，跳转到登录页
            window.location.href = 'login.html';
        }
    }

    // 初始化页面
    function initializePage() {
        $("button[name='toggle']").height(20);
        $("button[name='refresh']").height(20);
        $("#saveModal").modal('hide');

        // 侧边栏菜单跳转逻辑
        $('.sidebar .menu li a').click(function(e) {
            e.preventDefault();

            // 移除所有菜单项的活动状态
            $('.sidebar .menu li').removeClass('active');

            // 添加当前菜单项的活动状态
            $(this).parent().addClass('active');

            // 获取目标页面
            var target = $(this).data('target');

            // 如果点击的是当前页面，则不进行跳转
            if (target === 'product') {
                return;
            }

            // 根据目标跳转到相应页面
            switch(target) {
                case 'order':
                    window.location.href = 'order.html';
                    break;
                case 'index':
                    if (isAdmin) {
                        window.location.href = 'index.html';
                    }
                    break;
            }
        });
    }

    // 添加按钮点击事件
    $("#btn_save").click(function() {
        if (!isAdmin) {
            alert('您没有权限执行此操作');
            return;
        }
        $("#saveModal").modal('show');
        $("#id").val("");
        $("#productName").val("");
        $("#price").val("");
        $("#count").val("");
        $("#picPath").val("");
        $("#productImage").val("");
        clearImagePreview();
    });

    // 图片文件选择事件
    $("#productImage").change(function() {
        const file = this.files[0];
        if (file) {
            // 检查文件大小（5MB限制）
            if (file.size > 5 * 1024 * 1024) {
                alert('图片文件大小不能超过5MB');
                this.value = '';
                return;
            }
            
            // 检查文件类型
            if (!file.type.match('image.*')) {
                alert('请选择图片文件');
                this.value = '';
                return;
            }
            
            // 预览图片
            const reader = new FileReader();
            reader.onload = function(e) {
                $('#previewImg').attr('src', e.target.result).show();
                $('#noImageText').hide();
            };
            reader.readAsDataURL(file);
        } else {
            clearImagePreview();
        }
    });

    // 清除图片预览
    function clearImagePreview() {
        $('#previewImg').attr('src', '').hide();
        $('#noImageText').show();
    }

    // 编辑按钮点击事件
    $("#btn_edit").click(function edit() {
        if (!isAdmin) {
            alert('您没有权限执行此操作');
            return;
        }
        
        var list = $("#table").bootstrapTable('getSelections');
        if (list == null || list.length <= 0) {
            alert("未选中任何项！");
            return;
        }
        else if (list.length > 1) {
            alert("请仅选择一条数据！");
            return;
        }

        var id = list[0].id;
        $("#saveModal").modal('show');
        $.ajax({
            url : 'product/queryProductById',
            data : {
                'id' : id
            },
            success : function(ret) {
                $("#id").val(ret.id);
                $("#productName").val(ret.productName);
                $("#price").val(ret.price);
                $("#count").val(ret.count);
                $("#picPath").val(ret.picPath || '');
                
                // 显示现有图片
                if (ret.picPath) {
                    if (ret.picPath.startsWith('http')) {
                        $('#previewImg').attr('src', ret.picPath).show();
                        $('#noImageText').hide();
                    } else {
                        // 本地图片路径
                        $('#previewImg').attr('src', 'product/images/' + ret.picPath).show();
                        $('#noImageText').hide();
                    }
                } else {
                    clearImagePreview();
                }
            }
        });
    });

    // 添加用户模态框下的确认按钮点击事件
    $("#saveConfirmBtn").click(function() {
        if (!isAdmin) {
            alert('您没有权限执行此操作');
            return;
        }
        
        // 验证表单
        if (!$("#productName").val()) {
            alert('请输入商品名称');
            return;
        }
        if (!$("#price").val()) {
            alert('请输入商品价格');
            return;
        }
        if (!$("#count").val()) {
            alert('请输入库存数量');
            return;
        }
        
        $("#saveModal").modal('hide');
        
        // 创建FormData对象处理文件上传
        const formData = new FormData();
        formData.append('id', $("#id").val());
        formData.append('productName', $("#productName").val());
        formData.append('price', $("#price").val());
        formData.append('count', $("#count").val());
        formData.append('picPath', $("#picPath").val());
        
        // 添加图片文件
        const imageFile = $("#productImage")[0].files[0];
        if (imageFile) {
            formData.append('productImage', imageFile);
        }
        
        $.ajax({
            url : "product/save",
            type : 'post',
            dataType : 'json',
            data : formData,
            processData: false,
            contentType: false,
            success : function(result) {
                alert(result.message);
                // 重新加载表格
                $("#table").bootstrapTable("refresh");
            },
            error : function(xhr, status, error) {
                alert('保存失败：' + error);
            }
        });
    });

    // 通用判断选中与否，并提取选中的批量id
    function isEmptyAndGetIdList() {
        var list = $("table").bootstrapTable('getSelections');
        if (list == null || list.length <= 0) {
            alert("未选中任何项！");
            return;
        }

        var idList = new Array();
        for (var i = 0; i < list.length; i++) {
            idList[i] = list[i].id;
        }
        return idList;
    }

    // 删除按钮点击事件（可以批量删除）
    $("#btn_delete").click(function() {
        if (!isAdmin) {
            alert('您没有权限执行此操作');
            return;
        }
        
        idList = isEmptyAndGetIdList();
        if (confirm("是否删除选中的数据?")) {
            $.ajax({
                url : "product/deleteByList",
                type : 'post',
                dataType : 'json',
                data : {
                    idList : idList
                },
                success : function(data) {
                    alert("删除成功！");
                    // 重新加载表格
                    $("#table").bootstrapTable("refresh");
                }
            });
        }
    });

    // 添加到购物车按钮点击事件
    $("#btn_buy").click(function() {
        idList = isEmptyAndGetIdList();
        if (confirm("是否确认加入购物车?")) {
            $.ajax({
                url : "shopcart/add",
                type : 'post',
                dataType : 'json',
                data : {
                    idList : idList
                },
                success : function(data) {
                    alert("商品已添加到购物车");
                }
            });
        }
    });

    $("#btn_shopcart").click(function() {
        window.location.href="shopcart.html"
    });

    // 退出登录按钮点击事件
    $("#btn_logout").click(function() {
        if (confirm('确定要退出登录吗？')) {
            localStorage.removeItem('currentUser');
            window.location.href = 'login.html';
        }
    });

    $("#table").bootstrapTable({
        url : "product/list",
        clickToSelect : true,
        dataType : "json",
        contentType : "application/x-www-form-urlencoded;charset=utf-8",
        method : 'get',
        singleSelect: true,
        pagination: true,
        pageNumber: 1,
        pageSize: 5,
        queryParams: function (params) {
            return {
                pageSize: params.limit,
                pageNumber: (params.offset / params.limit)
            }
        },
        responseHandler : function(res) {
            return res.rows;
        },
        columns : [
        {
            field : 'state',
        },
        {
            field : 'id',
            title : 'ID',
            align : 'center'
        },
        {
            field : 'productName',
            title : '产品名称',
            align : 'center'
        },
        {
            field: 'picPath',
            title: '图片',
            align: 'center',
            formatter: function(value) {
                if (value) {
                    if (value.startsWith('http')) {
                        return '<img src="' + value + '" style="max-width: 100px; height: auto; border-radius: 4px;"/>';
                    } else {
                        return '<img src="product/images/' + value + '" style="max-width: 100px; height: auto; border-radius: 4px;" onerror="this.style.display=\'none\'; this.nextSibling.style.display=\'inline\';"><span style="display:none; color:#999;">图片加载失败</span>';
                    }
                } else {
                    return '<span style="color:#999;">无图片</span>';
                }
            }
        },
        {
            field : 'count',
            title : '库存数量',
            align : 'center'
        }]
    });
</script>
</html>
